<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p style="color: pink">这是一段测试文本</p>
    <p style="color: aqua; font-size: 28px">这是一段测试文本</p>
    <div>div</div>
  </body>
  <script>
    var pDom = document.getElementsByTagName("p");
    //Ⅰ）获取内联样式
    //节点.style.样式属性名  //获取某个具体的内联样式
    console.log(pDom[0].style.color);
    console.log(pDom[1].style.fontSize);
    //节点.style.cssText  //获取某个节点的所有内联样式，返回字符串
    console.log(pDom[1].style.cssText);
    console.log(pDom[0].style.cssText);

    //将cssText返回的字符串转换为对象
    var str = pDom[1].style.cssText,
      arr = [],
      cssObj = {};
    arr = str.split("; ");
    //console.log(arr);
    for (var i in arr) {
      //console.log(arr[i]);
      var newArr = [];
      newArr = arr[i].split(": ");
      //console.log(newArr);
      cssObj[newArr[0]] = newArr[1]; //不能用.语法 因为newArr[0]为变量
    }
    console.log(cssObj);
    console.log(cssObj.color);
    console.log(cssObj["font-size"]);

    //Ⅱ）设置内联样式
    //节点.style.样式属性名 = 属性值   //设置某个具体的内联样式
    pDom[0].style.color = "blue";
    pDom[1].style.fontSize = "10px";
    //节点.style.cssText  = 属性值或属性值列表  //设置某个节点的所有内联样式
    document.querySelector("div").style.cssText =
      "color:red;font-size:30px;border:10px solid pink";
  </script>
</html>
